<template>
    <view class="order-create">
      <scroll-view scroll-y class="viewport">
        <!-- 收货地址 -->
        <navigator
          class="shipment"
          hover-class="none"
          url="/pages/my/address/index?from=order"
          v-if="selectedAddress"
        >
          <view class="user">
            {{ selectedAddress.receiver }} {{ selectedAddress.contact }}
          </view>
          <view class="address">
            {{ selectedAddress.fullLocation }}{{ selectedAddress.address }}
          </view>
          <text class="icon icon-right"></text>
        </navigator>
  
        <!-- 没有收货地址 -->
        <navigator
          class="shipment"
          hover-class="none"
          url="/pages/my/address/index?from=order"
          v-else
        >
          <view class="address"> 请选择收货地址 </view>
          <text class="icon icon-right"></text>
        </navigator>
  
        <!-- 商品信息 -->
        <view class="goods">
        <navigator
          v-for="item in orderPre.goods"
          :key="item.skuId"
          :url="`/pages/goods/index?id=${item.id}`"
          class="item"
          hover-class="none"
        >
          <image class="cover" :src="item.picture"></image>
          <view class="meta">
            <view class="name ellipsis">
              {{ item.name }}
            </view>
            <view class="type">{{ item.attrsText }}</view>
            <view class="price">
              <view class="actual">
                <text class="symbol">¥</text>{{ item.payPrice }}
              </view>
              <view class="original">
                <text class="symbol">¥</text>{{ item.price }}
              </view>
            </view>
            <view class="quantity">x{{ item.count }}</view>
          </view>
        </navigator>
      </view>
        <!-- 配送及支付方式 -->
        <view class="related">
        <view class="item">
          <text class="text">配送时间</text>
          <text class="picker icon-fonts">{{ payments[0].text }}</text>
        </view>
        <view class="item">
          <text class="text">支付方式</text>
          <text class="picker icon-fonts">{{ shipments[0].text }}</text>
        </view>
        <view class="item">
          <text class="text">买家备注</text>
          <input
            v-model="buyerMessage"
            cursor-spacing="30"
            placeholder="建议留言前先与商家沟通确认"
          />
        </view>
      </view>
        <!-- 支付金额 -->
        <view class="settlement">
        <view class="item">
          <text class="text">商品总价: </text>
          <text class="number">
            <text class="symbol">¥</text>
            {{ orderPre.summary.totalPrice }}元
          </text>
        </view>
        <view class="item">
          <text class="text">运费: </text>
          <text class="number">
            <text class="symbol">¥</text>
            {{ orderPre.summary.postFee }}
          </text>
        </view>
        <!-- 如果有折扣，渲染折扣金额，没有折扣就不渲染了，免得用户伤心 -->
        <view class="item" v-if="orderPre.summary.discountPrice > 0">
          <text class="text">折扣: </text>
          <text class="number danger">
            <text class="symbol">-¥</text>
            {{ orderPre.summary.discountPrice }}
          </text>
        </view>
      </view>
      </scroll-view>
  
      <!-- 底部工具 -->
      <view class="toolbar">
      <view class="amount">
        <text class="symbol">¥</text>
        <text class="number">{{ orderPre.summary.totalPayPrice }}</text>
      </view>
      <view @click="submitForm" class="button">提交订单</view>
    </view>
    </view>
  </template>
  
  <script>
  import { mapState } from "vuex";
  import { getMemberOrderPre,postMemberOrder } from "@/api/order";
  export default {
    computed: {
      ...mapState("address", ["selectedAddress"]), // 当前选择的收货地址
    },
    data() {
    return {
      // 预付订单数据 对象类型
      orderPre: null,
      // 配送时间
      payments: [
        {
          id: 1,
          text: "时间不限 (周一至周日)",
        },
        {
          id: 2,
          text: "工作日送 (周一至周五)",
        },
        {
          id: 3,
          text: "周末配送 (周六至周日)",
        },
      ],
      // 支付方式
      shipments: [
        {
          id: 1,
          text: "在线支付",
        },
        {
          id: 2,
          text: "货到付款",
        },
      ],
      // 买家留言
      buyerMessage: "",
    };
  },
  async onLoad() {
    // 获取预付订单数据
    const res = await getMemberOrderPre();
    // console.log(res);
    this.orderPre = res.result;
  },
  methods: {
    // 提交订单
    async submitForm() {
      /* 
      1 先判断有没有选中收货地址 
      2 根据接口要求 构造请求参数
      3 把参数传递到接口中 完成订单的创建
      4 跳转到 订单详情页面
       */
      if (!this.selectedAddress) {
        return uni.showToast({ title: "您还没有选中收货地址", icon: "none" });
      }

      const data = {
        // 商品数组
        goods: this.orderPre.goods.map((v) => ({
          skuId: v.skuId,
          count: v.count,
        })),
        // 收货地址的id
        addressId: this.selectedAddress.id,
        // 配送时间类型，1为不限，2为工作日，3为双休或假日
        deliveryTimeType: 1, // 真实项目 动态去获取
        // 支付方式，1为在线支付，2为货到付款
        payType: 1, // 真实项目 动态去获取
        // 支付渠道：支付渠道，1支付宝、2微信--支付方式为在线支付时，传值，为货到付款时，不传值
        payChannel: 2, // 真实项目 动态去获取
        // 买家留言
        buyerMessage: this.buyerMessage,
      };
      const res = await postMemberOrder(data);
      uni.showToast({ title: "创建订单成功" });
      setTimeout(() => {
        // 跳转到订单详情页面
        uni.navigateTo({ url:  `/pages/order/detail?id=${res.result.id}`  });
      }, 1500);
    },
  },
  };
  </script>
  
  <style lang="scss">
  .safe-area-bottom {
    background-color: #fff;
  }
  .order-create {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: #f4f4f4;
  }
  
  .viewport {
    padding-top: 20rpx;
  }
  
  .shipment {
    padding: 30rpx 30rpx 25rpx 84rpx;
    margin: 0 20rpx;
    font-size: 26rpx;
    border-radius: 10rpx;
    background: url(https://static.botue.com/erabbit/static/images/locate.png)
      20rpx center / 50rpx no-repeat #fff;
    position: relative;
  }
  
  .shipment .icon {
    font-size: 36rpx;
    color: #333;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20rpx;
  }
  
  .shipment .user {
    color: #333;
    margin-bottom: 5rpx;
  }
  
  .shipment .address {
    color: #666;
  }
  
  .link {
    margin: 20rpx;
    text-align: center;
    line-height: 72rpx;
    font-size: 26rpx;
    color: #fff;
    border-radius: 72rpx;
    background-color: #27ba9b;
  }
  
  .popup-root {
    .list {
      padding: 20rpx 0 40rpx 10rpx !important;
    }
  
    .list .item {
      padding: 30rpx 60rpx 30rpx 10rpx;
      position: relative;
    }
  
    .list .item .icon {
      color: #999;
      font-size: 40rpx;
      transform: translateY(-50%);
      position: absolute;
      top: 50%;
      right: 10rpx;
    }
  
    .list .item .icon-checked {
      color: #27ba9b;
    }
  
    .list .item .text {
      font-size: 28rpx;
      color: #444;
    }
  }
  
  .goods {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }
  
  .goods .item {
    display: flex;
    padding: 30rpx 0;
    border-top: 1rpx solid #eee;
  }
  
  .goods .item:first-child {
    border-top: none;
  }
  
  .goods .item .cover {
    width: 170rpx;
    height: 170rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
  }
  
  .goods .item .meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }
  
  .goods .item .name {
    height: 80rpx;
    font-size: 26rpx;
    color: #444;
  }
  
  .goods .item .type {
    line-height: 1.8;
    padding: 0 15rpx;
    margin-top: 6rpx;
    font-size: 24rpx;
    align-self: flex-start;
    border-radius: 4rpx;
    color: #888;
    background-color: #f7f7f8;
  }
  
  .goods .item .price {
    display: flex;
    align-items: baseline;
    margin-top: 6rpx;
    font-size: 28rpx;
  }
  
  .goods .item .symbol {
    font-size: 20rpx;
  }
  
  .goods .item .original {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
  }
  
  .goods .item .actual {
    margin-right: 10rpx;
    color: #cf4444;
  }
  
  .goods .item .quantity {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 26rpx;
    color: #444;
  }
  
  .related {
    padding: 0 20rpx;
    margin: 20rpx 20rpx 0;
    border-radius: 10rpx;
    background-color: #fff;
  }
  
  .related .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80rpx;
    font-size: 26rpx;
    color: #333;
  }
  
  .related input {
    flex: 1;
    text-align: right;
    margin: 20rpx 0;
    padding-right: 20rpx;
    font-size: 26rpx;
    color: #999;
  }
  
  .related .item .text {
    width: 125rpx;
  }
  
  .related .picker {
    color: #666;
  }
  
  .related .picker::after {
    content: "\e6c2";
  }
  
  /* 结算清单 */
  .settlement {
    padding: 0 20rpx;
    margin: 20rpx 20rpx 0;
    border-radius: 10rpx;
    background-color: #fff;
  }
  
  .settlement .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    font-size: 26rpx;
    color: #333;
  }
  
  .settlement .symbol {
    font-size: 80%;
  }
  
  .settlement .danger {
    color: #cf4444;
  }
  
  .gap {
    height: 20rpx;
  }
  
  .toolbar {
    height: 120rpx;
    padding: 0 40rpx;
    border-top: 1rpx solid #eaeaea;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .toolbar .amount {
    font-size: 40rpx;
    color: #cf4444;
  }
  
  .toolbar .amount .symbol,
  .toolbar .amount .decimal {
    font-size: 75%;
  }
  
  .toolbar .button {
    width: 220rpx;
    text-align: center;
    line-height: 72rpx;
    font-size: 26rpx;
    color: #fff;
    border-radius: 72rpx;
    background-color: #27ba9b;
  }
  </style>
  